<template>
  <view class="share-popup">
    <!-- 分享弹窗选项 包含QQ邓 -->
    <view class="jiantou" :class="show? 'barshow' : 'bars'">
      <view class="triangle"></view>
      邀请好友赚佣金，100%纯羊毛，赶紧薅！<br>
      TA得你也得：全城<text>39元</text>免费洗车券，<text>1000元</text>购车折扣券
      <view class="jtimg">
        <image src="https://files.yzsheng.com/client/commodity/libao@2x.png" mode="heightFix"></image>
      </view>
    </view>
    <u-popup v-model="show" mode="bottom" border-radius="30">
      <view class="popup-box">
        <view class="popup-title flex flex-jc-sb flex-ai-c">
          <view class="1234">
            <view class="fenx">
              分享赚佣金
            </view>
            <view class="zdduo">
              分享越多，赚的越多
            </view>
          </view>
          <view class="cakan" @click="chakanClick()">
            查看详情
            <u-icon name="arrow-right" color="#fbd220" size="24rpx"></u-icon>
          </view>
        </view>
        <!-- 分享的目标 -->
        <view class="share-target flex flex-ai-c flex-wrap-w">
          <template>
            <view v-for="(item, i) in isDownload?shareList:shareList.slice(0,2)" :key="i" class="width-25 mb_15 flex flex-dir-c flex-ai-c"
              @click="handleShare(item)">
              <i-icon :icon="item.icon" :size="item.sizes" :color="item.color" :type="!item.color ? 'multiple':'single'"></i-icon>
              <text class="text">{{ item.text }}</text>
            </view>
          </template>
        </view>

        <!-- 取消按钮 -->
        <view class="btn-cancel" @click="cancel()">
          <text>取消</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    model: {
      prop: 'popupShow',
      event: 'up'
    },
    props: {
      popupShow: {
        type: Boolean,
        default: false
      },
      isDownload: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      show: {
        get() {
          return this.popupShow
        },
        set(v) {
          this.$emit('up', v)
        }
      }
    },
    data() {
      return {
        // 分享目标app列表
        shareList: [{
            icon: 'iconweixin',
            text: '微信',
            color: '#46bb36',
            type: 'WXSceneSession',
            sizes: '80rpx'
          },
          {
            icon: 'iconpengyouquan',
            text: '朋友圈',
            color: '',
            type: 'WXSenceTimeline',
            sizes: '80rpx'
          },
          {
            icon: 'iconqq',
            text: 'QQ',
            color: '#18b6ed',
            type: 'qq',
            sizes: '80rpx'
          },
          {
            icon: 'iconLOGO',
            text: '好友',
            color: '#666666',
            type: 'goodFriends',
            sizes: '60rpx'
          },
          {
            icon: 'iconlianjie',
            text: '复制链接',
            color: '#666666',
            type: 'iconlianjie',
            sizes: '58rpx'
          }
        ],
      };
    },

    methods: {
      // 点击分享
      handleShare(item) {
        this.$emit('change', item.type)
      },

      // 取消
      cancel() {
        this.$emit('close', false)
        this.$emit('up', false)
      },
      //查看详情
      chakanClick() {
        this.show = false
        uni.navigateTo({
          url: '/pages_common/pages_me/invitation/invitation'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 分享弹窗样式
  .popup-box {
    font-size: 32rpx;
    color: #333333;

    .popup-title {
      padding-top: 40rpx;
      height: 120rpx;
      background: linear-gradient(270deg, #FBD220, #FFE23E);
      padding: 0rpx 30rpx;

      .fenx {
        font-size: 38rpx;
        font-weight: bold;
        color: #333333;
      }

      .zdduo {
        font-size: 26rpx;
        font-weight: 500;
        color: #666666;

      }

      .cakan {
        width: 180rpx;
        height: 56rpx;
        background: #3D3D3D;
        border-radius: 28rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #FBD220;
        text-align: center;
        line-height: 56rpx;
      }
    }

    .share-target {
      padding: 52rpx 20rpx 36rpx;

      .text {
        margin-top: 18rpx;
      }
    }

    // 取消按钮
    .btn-cancel {
      height: 100rpx;
      line-height: 100rpx;
      border-top: 10rpx solid #F4F4F4;
      text-align: center;
    }

  }

// 弹框
.bars { 
    opacity: 0; 
    visibility: hidden;
    
} 
.barshow { 
    opacity: 1;
    visibility: visible;
} 
  .jiantou {
    position: fixed;
    bottom: 700rpx;
    /* #ifdef H5 */
    bottom: 680rpx;
    /* #endif */
    left: 30rpx;
    width: 690rpx;
    height: 130rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    z-index: 999999;
    transition: all .6s;

    padding: 30rpx 18rpx;
    font-size: 26rpx;
    color: #666666;

    text {
      color: #eb5c02;
      font-weight: bold;
    }
  }

  .triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff;
    position: absolute;
    bottom: -18rpx;
    left: 30rpx;
    z-index: 999999;
  }

  .jtimg {
    width: 160rpx;
    height: 160rpx;
    margin-top: 35rpx;
    margin-left: 190rpx;

    image {
      width: 160rpx;
      height: 160rpx;
    }
  }
</style>
